<template>
  <el-dialog v-model="dialogVisible" title="修改密码" width="500px" draggable>
    <div class="edit_password_box">
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        @keyup.enter="submitForm(ruleFormRef)"
      >
        <el-form-item label="旧密码" prop="oldPass">
          <el-input v-model="ruleForm.oldPass" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item style="margin-top: 30px" label="新密码" prop="newPass">
          <el-input v-model="ruleForm.newPass" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item style="margin-top: 30px" label="确认密码" prop="confirmPass">
          <el-input v-model.number="ruleForm.confirmPass" type="password" />
        </el-form-item>
        <el-form-item>
          <!-- <el-button type="primary" @click="submitForm(ruleFormRef)"> Submit </el-button>
          <el-button @click="resetForm(ruleFormRef)">Reset</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { editPswApi } from "@/api/modules/experimentalist/index";
import { ElMessage, type FormInstance } from "element-plus";
import { useUserStore } from "@/stores/modules/user";
import router from "@/routers";

// userStore
const userStore = useUserStore();

// 修改密码的请求函数
const editPswFunc = async () => {
  await editPswApi({
    tbLabUserId: userStore.userInfo.id,
    oldPsw: ruleForm.oldPass,
    newPsw: ruleForm.newPass
  })
    .then(res => {
      if (res.status == 400) {
        ElMessage.error(res.msg);
      } else {
        router.replace("/login");
        localStorage.clear();
        sessionStorage.clear();
        userStore.setToken("");
        location.reload();
        ElMessage.success("修改成功,请重新登录");
      }
    })
    .catch(() => {
      ElMessage.error("修改失败");
    })
    .finally(() => {
      ruleForm.confirmPass = "";
      ruleForm.oldPass = "";
      ruleForm.newPass = "";
    });
};

const dialogVisible = ref(false);
const openDialog = () => {
  dialogVisible.value = true;
};

defineExpose({ openDialog });

const ruleFormRef = ref<FormInstance>();

const newPassV = (rule: any, value: any, callback: any) => {
  console.log(rule);
  console.log(value);
  console.log(callback);

  if (!value) {
    return callback(new Error("请再次输入确认密码"));
  }
  if (value != ruleForm.newPass) {
    console.log("不一致");

    return callback(new Error("两次输入的密码不一致"));
  }
  return true;
};

const ruleForm = reactive({
  oldPass: "",
  newPass: "",
  confirmPass: ""
});

const rules = reactive({
  oldPass: [{ required: true, trigger: "blur", message: "请填写旧密码" }],
  newPass: [{ required: true, trigger: "blur", message: "请填写新密码" }],
  confirmPass: [{ validator: newPassV, required: true, trigger: "blur" }]
});

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(valid => {
    if (valid) {
      console.log("submit!");
      editPswFunc();
      dialogVisible.value = false;
    } else {
      console.log("error submit!");
    }
  });
};
</script>

<style lang="scss" scoped>
.edit_password_box {
  padding: 20px 20px 0;
}
</style>
